<template>
  <div class="mainBody_options">
    <el-form ref="basicSearchForm" :model="searchInfo" :label-width="labelWidth" inline class="basicSearch" >
      <template v-for="item in formItemList" :key="item.prop">
        <el-form-item :label="item.label" :prop="item.prop" v-if="item.type === 'input'">
          <el-input v-model.trim="searchInfo[item.prop]" :placeholder="`请输入${item.label}`" :maxlength="item.maxlength"
            clearable></el-input>
        </el-form-item>
        <el-form-item :label="item.label" :prop="item.prop" v-if="item.type === 'select'">
          <el-select v-model="searchInfo[item.prop]" :placeholder="`请选择${item.label}`" clearable>
            <el-option v-for="(op, index) in item.optionsList" :key="index" :label="op.label" :value="op.value" />
          </el-select>
        </el-form-item>
      </template>
      <el-form-item>
        <el-button icon="Search" @click="handleOnSearch">搜索</el-button>
        <el-button icon="Refresh" @click="handleOnReset(basicSearchForm)">重置</el-button>
      </el-form-item>
    </el-form>
    <div>
      <el-divider style="height: 10; margin-top: 0;"/>
      <el-form-item >
        <slot name="btnOptions"></slot>
      </el-form-item>
    </div>
  </div>
</template>
<script lang='ts' setup>
import type { FormInstance } from 'element-plus'

import { UseFormItem } from "./serchTypes"

const basicSearchForm = ref();

// 查询信息
let searchInfo = ref({});

const props = defineProps({
  labelWidth: {
    type: String,
    default: "100px"
  },
  formItemList: {
    required: true,
    type: Array as PropType<Array<UseFormItem>>,
    default: () => [] as Array<UseFormItem>
  }
})


const $emits = defineEmits([
  "handleSearch",
  "handleReset",
]);


// 查询
function handleOnSearch() {
  $emits("handleSearch")
}

// 重置
function handleOnReset(formEl: FormInstance | undefined) {
  searchInfo.value = {};
  if (!formEl) return
  formEl.resetFields()
  $emits("handleReset")
}

defineExpose({
  searchInfo,
});
</script>

<style scoped lang="scss">
.basicSearch {
  ::v-deep .el-form-item {
    ::v-deep .el-form-item__content {
      width: 200px;
    }

    &:last-child {
      margin-right: 0;
    }
  }
}
</style>